<template>
    <div class="register">
        <div class="container">
            <a href="/#/index"><img src="/images/zhizhi/logo.png" alt=""></a>
        </div>
        <div class="wrapper">
            <div class="container">
                <div class="register-form">
                    <div class="head"><h3>用户注册</h3></div>
                    <div class="telphone space">
                        <input type="number" placeholder="请输入手机号" oninput="this.value=this.value.length>11?this.value.substr(0,11):this.value;" v-model="tel" />
                    </div>
                    <div class="yanzheng space">
                        <div class="yanz">
                            <input type="text" placeholder="请输入验证码" />
                            <button>获取验证码</button>
                        </div>
                    </div>
                    <div class="password space">
                        <input type="password" placeholder="请输入密码" v-model="pasd" />
                    </div>
                    <div class="again space">
                        <input type="password" placeholder="请再次输入密码" v-model="repasd" />
                    </div>
                    <div class="username space">
                        <input type="text" placeholder="请输入用户名" v-model="uname" />
                    </div>
                    <div class="name space">
                        <input type="text" placeholder="请输入真实姓名" v-model="realname" />
                    </div>
                    <div class="idnum space">
                        <input type="number" placeholder="中国居民身份证" oninput="this.value=this.value.length>18?this.value.substr(0,18):this.value;" v-model="idnum" />
                    </div>
                    <div class="school space">
                        <div class="item">
                            <select name="school" v-model="school">
                                <option value="中国矿业大学">中国矿业大学</option>
                                <option value="中国矿业大学（徐海）">中国矿业大学（徐海）</option>
                                <option value="江苏师范大学">江苏师范大学</option>
                            </select>
                        </div>
                    </div>
                    <div class="academy space">
                        <div class="item">
                            <select name="academy" v-model="academy">
                                <option value="中国矿业大学">管理学院</option>
                                <option value="中国矿业大学">外文学院</option>
                                <option value="中国矿业大学">体育学院</option>
                                <option value="中国矿业大学">建筑与设计学院</option>
                            </select>
                        </div>
                    </div>
                    <button class="sure" @click="register">注册</button>
                    <div class="space">
                        <div class="agreement">注册代表您已阅读并同意<a href="javascript:;">《知知用户协议》</a></div>
                    </div>
                </div>
            </div>
        </div>
        <nav-footer></nav-footer>
    </div>
</template>
<script>
import NavFooter from './../components/NavFooter'
export default {
    name:'register',
    components:{
        NavFooter
    },
    methods:{
        register(){
            this.axios.post('/user/register',{
                username:'admin1',
                password:'admin1',
                email:'admin1@163.com'
            }).then(()=>{
                this.$message.success('注册成功');
            })
        }
    }
}
</script>
<style lang="scss">
.register{
    width: 100%;
    &>.container{
        height:113px;
        img{
            width:auto;
            height:100%;
        }
    }
    .wrapper{
        background:url('/images/back2.png') no-repeat center;
        margin-bottom: 10rem;
        .container{
            height: 576px;
            .register-form{
                box-sizing: border-box;
                padding-left: 31px;
                padding-right: 31px;
                width:410px;
                height:510px;
                background-color:#ffffff;
                position:absolute;
                bottom:29px;
                box-shadow: 0 5px 5px #999999;
                padding-left: 6rem;
                .head{
                    h3{
                        height: 5rem;
                        line-height: 5rem;
                        color: #2d81bd;
                    }
                }
                .space{
                    height: 40px;
                    width:20rem;
                    .yanz{
                        display: flex;
                        justify-content: space-between;
                        input{
                            width: 14rem;
                        }
                        button{
                            margin-left: 0.5rem;
                            width: 5.5rem;
                            border: 1px solid #ccc;
                            border-radius: 4px;
                            background-color: #2d81bd;
                            color: white;
                        }
                    }
                    input{
                        height: 30px;
                        width: 20rem;
                        border: 1px solid #ccc;
                        border-radius: 4px;
                        &:hover{
                            border: 1px solid #2d81bd;
                            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #2d81bd;
                        }
                    }
                    select{
                        height: 30px;
                        width: 20rem;
                        border-radius: 4px;
                    }
                    .agreement{
                        text-align: center;
                    }
                }
                .sure{
                    width: 20rem;
                    height: 30px;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    background-color: #2d81bd;
                    color: white;
                    
                }
            }
        }
    }
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type="number"] {
    -moz-appearance: textfield;
}
</style>